<!-- Page Style -->
<!-- <link rel="stylesheet" href="<?php // echo base_url() ?>assets/css/design/article.css" > -->
<!-- Google Maps API  -->
<script type="text/javascript" 
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzmqGgteQuwwllDX9QmG60gVjP6laXDBc">
</script>
<!-- <script type="text/javascript" src="<?php //echo base_url() ?>assets/js/mapProcess.js"></script> -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly-plugins.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/pages/history-landing.js"></script>


<div class="pages" ng-view>
	<div id="map-canvas" class="big-map">
		
	</div>

	<div class="timeline" id="main-timeline">
		<div class="frame" id="years-frame">
			<ul class="years slidee">
				<!-- Loading years -->
			</ul>
		</div>
		<div id="y-scrollbar" class="scrollbar">
			<div class="handle">
				<div class="mousearea"></div>
			</div>
		</div>

		<div class="frame" id="decades-frame">
			<ul class="decades slidee">
			</ul>
		</div>
		<div id="d-scrollbar" class="scrollbar">
			<div class="handle">
				<div class="mousearea"></div>
			</div>
		</div>

		<div class="range"></div>

	</div>
		
</div> <!-- page -->

<style type="text/css">
	.big-map {
		width: 100%; height: 90%;
		min-height: 400px;
		/*background: #cfc;*/
		position: absolute;
	}

	.timeline {
		position: fixed;
		width: 100%; background: white;
		padding-top: 5px;
		left: 0; bottom: 0;
	}
	.frame { width: 100%; height: 60px; padding: 0;}
	.frame .slidee{ margin: 0; padding: 0; 
		height: 60px; list-style: none; 
	}
	.frame .slidee li { 
		float: left; margin: 0 5px 0 0;
		padding: 0; width: 80px; height: 60px; 
		background: #eee; cursor: pointer;
		text-align: center; padding-top: 13px;

		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	#years-frame .slidee li {
		width: 50px; font-size: 11px;
	}
	#years-frame .slidee li span {
		font-size: 13px;
	}

	#decades-frame, #decades-frame .slidee, #decades-frame .slidee li {
		height: 25px; padding-top: 0; line-height: 25px;
	}
	#decades-frame .slidee li {
		width: 160px;
	}
	#decades-frame .slidee li.active {
		background: #86E2D5;
	}
	.timeline .range { 
		position: absolute;
		width: 165px; height: 10px;
		background: red; opacity: 0.4;
		top: 0px; left: 50%;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transform: translate(-50%, 0);
	}

	@media (max-width: 768px) {
		.frame .slidee li { width: 50px;}
		.timeline .range {
			width: 165px; height: 5px;
		}

		#years-frame { height: 45px; }
		#years-frame .slidee{ height: 45px; }
		#years-frame .slidee li { height: 45px; padding-top: 0;}
	}

	/* Scrollbar */
	.scrollbar {
		margin: 3px 0 1em 0;
		height: 2px;
		background: #ccc;
		line-height: 0;
	}
	.scrollbar .handle {
		width: 100px;
		height: 100%;
		background: #292a33;
		cursor: pointer;
	}
	.scrollbar .handle .mousearea {
		position: absolute;
		top: -9px;
		left: 0;
		width: 100%;
		height: 20px;
	}

</style>